<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useCounterStore } from './store/counter'
import { ElMenu, ElMenuItem, ElHeader, ElMain, ElFooter, ElButton } from 'element-plus'
import { debounce } from 'lodash'

// 解决ResizeObserver错误
const NativeResizeObserver = window.ResizeObserver;
class DebouncedResizeObserver extends NativeResizeObserver {
  constructor(callback, options) {
    const debouncedCallback = debounce(entries => {
      callback(entries);
    }, 100);
    super(debouncedCallback, options);
  }
}
window.ResizeObserver = DebouncedResizeObserver;

// 导航栏激活项
const activeIndex = ref('1')

// 获取路由实例
const router = useRouter()

// 导航栏选择处理
const handleSelect = (key) => {
  activeIndex.value = key
}

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 使用Pinia store
const counterStore = useCounterStore()
</script>

<template>
  <div class="app-container">
    <ElHeader>
      <div style="display: flex; justify-content: flex-start; align-items: center;">
        <ElButton type="primary" @click="goBack" icon="ArrowLeft" v-if="$route.path !== '/'">
          返回
        </ElButton>
      </div>
    </ElHeader>

    <ElMain>
      <router-view></router-view>
    </ElMain>

    <ElFooter>
      <p>© 2023 智慧校园生活管理系统</p>
    </ElFooter>
  </div>
</template>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f8f9fa;
}

.el-header {
  background-color: #ffffff;
  padding: 15px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid #e9ecef;
}

.el-main {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.el-footer {
  text-align: center;
  padding: 15px;
  background-color: #ffffff;
  border-top: 1px solid #e9ecef;
  color: #6c757d;
  font-size: 14px;
}
</style>
